<template>
	<view class="content">
		<!-- 银行卡 -->
		<view class="typeContent"  @tap="editYhk()" v-if="list.bankCardNumber">
			<image v-if="list.openingBank.includes('农业银行')" src="@/static/mine/nyBank.png" class="bankImg"></image>
			<image v-else-if="list.openingBank.includes('建设银行')" src="@/static/mine/jsBank.png" class="bankImg"></image>
			<image v-else-if="list.openingBank.includes('交通银行')" src="@/static/mine/jtBank.png" class="bankImg"></image>
			<image v-else-if="list.openingBank.includes('工商银行')" src="@/static/mine/gsBank.png" class="bankImg"></image>
			<image v-else-if="list.openingBank.includes('中国银行')" src="@/static/mine/zgBank.png" class="bankImg"></image>
			<image v-else src="@/static/mine/zsBank.png" class="bankImg"></image>
			
			<!-- <view class="openingBank">
				{{list.openingBank}}
			</view> -->
			<view class="bankNo">{{formatBankCardNumber(list.bankCardNumber)}}</view>
			<!-- <view class="bankInfo">
				<view>{{list.realName}}</view>
				<view>{{list.openingBank}}</view>
				<view>**** **** **** {{list.bankCardNumber.slice(list.bankCardNumber.length - 4)}}</view>
			</view>
			
			<view class="cancel" @tap.stop="del()">取消</view> -->
			
		</view>
		
		
		<view class="noneContent" v-else>
			<image src="../../static/index/noneData.png" class="noneImg"></image>
		</view>
		<view class="sure" @tap="add" v-if="!list.bankCardNumber">立即添加</view>
		
		<view class="prop" v-if="isProp">
			<view class="buyProp">
				<image src="../../static/recharge/close.png" class="closeImg" @tap="closeProp"></image>
				<view class="title">确认</view>
				<!-- <view class="numTitle">兑换金额</view>
				<input placeholder="请输入兑换金额" class="input" placeholder-class="placeholder" maxlength="11" type="number" v-model="amount" />
				<view class="numTitle">交易密码</view>
				<input placeholder="请输入交易密码" class="input" placeholder-class="placeholder" password maxlength="11" type="number" v-model="payPassword" /> -->
			  <view class="numTitle">手机号验证码</view>
			  <input placeholder="请输入您的手机号验证码" class="input" placeholder-class="placeholder" password maxlength="8" type="number" v-model="verifyCode"/>
			  <view class="codes" @tap="getCodes">{{text}}</view>
				<view class="sures" @tap="sure">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { paymentList,deletePaymentTerm,sendMsg } from '../../api/api.js'
	export default {
		data() {
			return {
				id:'',
				list:'',
				phone:'',
				// 是否展示购买弹窗
				isProp:false,
				text:'获取验证码',
				// 验证码
				verifyCode:'',
				options:'',
			}
		},
		onLoad(e){
			this.options = e.options
		},
		onShow() {
			// 获取收款方式列表
			this.getList()
			this.phone = uni.getStorageSync('phone')
		},
		methods: {
			// 获取收款方式列表
			getList() {
				let data = {}
				paymentList(data).then( res=> {
					this.list = res.data.bankCard
				})
			},
			
			formatBankCardNumber(cardNumber) {
			    // 移除所有非数字字符
			    const cleaned = cardNumber.replace(/\D/g, '');
			    
			    // 每4个数字插入一个空格
			    const formatted = cleaned.replace(/(\d{4})(?=\d)/g, '$1 ');
			    
			    return formatted;
			},
			//获取验证码
			getCodes(){
				console.log(this.phone)
				if( this.text != '获取验证码' ) {
					return false
				}
				//判断手机号是否正确
				if((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){ 
					let data = {
						phone:this.phone,
						type:9
					}
					sendMsg(data).then(res=> {
						if ( res.code == 200 ) {
							uni.showToast({
								icon:'none',
								title:'验证码已发送，请注意查收~'
							})
							//正确-发送验证码，变化 text 文字
							var seconds = 60;
							this.text = seconds + 's后重新获取';
							let interval = setInterval(()=>{
							  if(seconds > 0){
								  seconds -- ;
								  this.text = seconds + 's后重新获取'
							  }else{
								  this.text = '获取验证码';
								  clearInterval(interval)
							  }
							},1000)
						}
					})
			  }else{
				  uni.showToast({
					  icon:'none',
					  title:'请输入正确的手机号~'
				  })
			  }
			},
			// 关闭弹窗
			closeProp() {
				this.isProp = false
			},
			// 修改银行卡收款方式
			editYhk() {
				console.log(111)
				uni.navigateTo({
					url:'./addCard?id=' + this.list.id + '&options='+this.options
				})
			},
			// 修改支付宝收款方式
			// editZFB() {
			// 	uni.navigateTo({
			// 		url:'../withdraw/addZfb?id=' + this.list.alipay.id
			// 	})
			// },
			// 删除收款方式
			del() {
				this.id = this.list.id
				this.isProp = true
			},
			sure() {
				let data = {
					id:this.id,
					msgCode:this.verifyCode
				}
				deletePaymentTerm(data).then( res=> {
					if( res.code == 200 ) {
						uni.showToast({
							icon:'none',
							title:'删除成功'
						})
						setTimeout(function() {
							uni.navigateBack({
								delta:1
							})
						},500)
					}
				})
			},
			// 添加收款方式
			add() {
				uni.navigateTo({
					url:'./addCard'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: rgba(246, 246, 247, 1);
	}
</style>
<style lang="less">
  .content {
	  display: flex;
	  align-items: center;
	  flex-direction: column;
	  
		.typeContent {
			width: 710rpx;
			position: relative;
			margin-top: 20rpx;
			// display: flex;
			// padding: 28rpx 0 0 28rpx;
			// width: 682rpx;
			// height: 156rpx;
			// background: linear-gradient( 90deg, #FA4C4D 0%, #F97A79 100%);
			// box-shadow: 0px 8rpx 8rpx 0px rgba(255,255,255,0.25);
			// border-radius: 16rpx;
			
			.bankImg {
				width: 710rpx;
				height: 360rpx;
			}
			.openingBank{
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				position: absolute;
				top: 40rpx;
				left: 160rpx;
			}
			
			.bankNo {
				position: absolute;
				bottom: 60rpx;
				left: 50rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 28rpx;
			}
			
			.bankInfo {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				
				view {
					margin-bottom: 16rpx;
				}
			}
			
			.cancel {
				position: absolute;
				top: 72rpx;
				right: 40rpx;
				text-align: center;
				width: 136rpx;
				height: 64rpx;
				border-radius: 12rpx;
				border: 2rpx solid #FFF6F5;
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFF6F5;
				line-height: 64rpx;
			}
			
			// margin-bottom: 40rpx;
			// border-bottom: #F5F5F5 10rpx solid;
			// padding-bottom: 31rpx;
			
			.typeTop {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.type {
					margin-left: 30rpx;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #353535;
					line-height: 40rpx;
					.icon {
						width: 38rpx;
						height: 38rpx;
						margin-right: 16rpx;
					}
				}
				.deleteImg {
					margin-right: 30rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
			.info {
				margin: 30rpx 0 0 30rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 40rpx;
				span {
					margin-left: 24rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #353535;
					line-height: 42rpx;
				}
			}
		}
		.noneContent {
			display: flex;
			align-items: center;
			flex-direction: column;
			.noneImg {
				margin-top: 162rpx;
				width: 276rpx;
				height: 146rpx;
			}
			.tips {
				margin-top: 37rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #B8B8B8;
				line-height: 40rpx;
			}
		}
		.sure {
			width: 670rpx;
			text-align: center;
			line-height: 88rpx;
			height: 88rpx;
			background: #00C538;
			border-radius: 88rpx;
			color: #FAFAFA;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			margin: 60rpx 0 0 40rpx;
		}
		.prop {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(26, 26, 26, 0.45);
			.buyProp {
				padding-bottom: 40rpx;
				position: relative;
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 560rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				.closeImg {
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					top: 37rpx;
					right: 25rpx;
				}
				
				.title {
					margin-top: 38rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1A1A1A;
					line-height: 42rpx;
				}
				.numTitle {
					margin-top: 46rpx;
					width: 470rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 37rpx;
				}
				.input {
					margin-top: 12rpx;
					height: 88rpx;
					width: 470rpx;
					border-bottom:1rpx solid #F2F2F2 ;
				}
				.placeholder {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #808080;
					line-height: 33rpx;
				}
				.sures {
					margin-top: 60rpx;
					text-align: center;
					line-height: 86rpx;
					width: 470rpx;
					height: 86rpx;
					background: #00C538;
					border-radius: 45rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
				.codes {
					position: absolute;
					right: 43rpx;
					bottom: 210rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #00C538;
					line-height: 33rpx;
				}
			}
		}
	}
</style>
